<!DOCTYPE html>
<html>
<head>
    <title>智慧大棚可视化监控系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script type="module" src="https://unpkg.com/@google/model-viewer@^3.4.0/dist/model-viewer.min.js"></script>
    <script nomodule src="https://unpkg.com/@google/model-viewer@^3.4.0/dist/model-viewer-legacy.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
    <script src="js/model-viewer-controls.js"></script>
    
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #00aeff;
            --bg-color: #020a18;
            --panel-bg-color: rgba(0, 28, 58, 0.5);
            --panel-border-color: rgba(0, 174, 255, 0.3);
            --glow-color: rgba(0, 174, 255, 0.5);
            --text-glow: 0 0 8px var(--glow-color);
        }
        *{margin:0;padding:0;box-sizing:border-box}
        body{
            font-family:'Noto Sans SC', sans-serif;
            background:var(--bg-color);
            color:#fff;
            overflow:hidden;
        }
        .container{
            width:100vw;
            height:100vh;
            padding:15px;
            display:grid;
            grid-template-columns:380px 1fr 380px;
            grid-template-rows:80px 1fr;
            gap:15px;
            background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="100" height="100" viewBox="0 0 100 100"%3E%3Cg fill="%23051937" fill-opacity="0.4"%3E%3Crect x="0" y="0" width="50" height="50"%2F%3E%3Crect x="50" y="50" width="50" height="50"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        }
        .header {
            grid-column: 1 / 4;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            position: relative;
            background: url('') no-repeat center center;
            background-size: 100% 100%;
            padding: 0 20px;
        }
        .header-left {
            justify-self: start;
        }
        .header-center {
            text-align: center;
        }
        .header-center h1 {
            margin-bottom: 0;
        }
        .header-right {
            justify-self: end;
        }
        .header .datetime {
            font-family: 'Orbitron', sans-serif;
            font-size: 18px;
            color: var(--primary-color);
            text-shadow: var(--text-glow);
        }
        .scene-alarm {
            position: absolute;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(245, 34, 45, 0.8);
            color: #fff;
            padding: 8px 15px;
            border-radius: 20px;
            border: 1px solid #f5222d;
            font-size: 14px;
            z-index: 10;
            animation: pulse 1.5s infinite;
        }
        .panel {
            background-color: var(--panel-bg-color);
            border: 1px solid var(--panel-border-color);
            border-radius: 4px;
            padding: 20px;
            backdrop-filter: blur(5px);
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .panel-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 15px;
            overflow-y: auto;
        }
        .panel::before, .panel::after, .panel > .panel-content::before, .panel > .panel-content::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            border-color: var(--primary-color);
            border-style: solid;
        }
        .panel::before { top: -2px; left: -2px; border-width: 2px 0 0 2px; }
        .panel::after { top: -2px; right: -2px; border-width: 2px 2px 0 0; }
        .panel > .panel-content::before { bottom: -2px; left: -2px; border-width: 0 0 2px 2px; }
        .panel > .panel-content::after { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; }
        
        .panel-title{
            color: var(--primary-color);
            font-size:22px;
            font-weight: bold;
            margin-bottom: 0;
            padding-left: 10px;
            border-left: 4px solid var(--primary-color);
            text-shadow: var(--text-glow);
        }
        .data-card{
            background: rgba(0,0,0,0.2);
            border: 1px solid var(--panel-border-color);
            border-radius: 4px;
            padding: 15px;
            flex-grow: 1;
        }
        .data-item{
            display:flex;
            justify-content:space-between;
            align-items:center;
            padding:12px 0;
            border-bottom: 1px solid var(--panel-border-color);
            font-size: 16px;
        }
        .data-item:last-child{border-bottom:none}
        .data-item span:first-child { display: flex; align-items: center; gap: 10px; }
        .data-value{
            color:#fff;
            font-weight:bold;
            font-family: 'Orbitron', sans-serif;
            font-size: 18px;
            text-shadow: var(--text-glow);
        }
        .status-normal{color:#00ff87}
        .status-warning{color:#ffc107}
        .status-error{color:#f5222d}

        .camera-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px; flex-grow: 0; max-height: 200px;}
        .camera-item{border-radius:4px;position:relative;overflow:hidden;border:1px solid var(--panel-border-color); background-size: cover; background-position: center; height: 90px; aspect-ratio: 16/9;}
        
        .main-content{position:relative;border:1px solid var(--panel-border-color);border-radius:4px;overflow:hidden}
        #webgl-container{position:absolute;top:0;left:0;width:100%;height:100%}
        .control-panel{position:absolute;z-index:10;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px;background:rgba(0,21,41,0.7);padding:8px;border-radius:12px;border:1px solid var(--panel-border-color);backdrop-filter:blur(10px)}
        .control-btn{background:transparent;border:1px solid var(--panel-border-color);color:#fff;font-size:15px;cursor:pointer;padding:8px 15px;border-radius:8px;transition:all 0.3s ease; display: flex; align-items: center; gap: 8px;}
        .control-btn:hover{color:white;background:var(--primary-color);border-color: var(--primary-color);}
        .control-btn.active{color:white;background:var(--primary-color); border-color: var(--primary-color); box-shadow: 0 0 15px var(--primary-color);}
        
        .alert-item{ color: #ffc107; animation:pulse 2s infinite}
        @keyframes pulse{0%{opacity:1}50%{opacity:0.6}100%{opacity:1}}
        
        /* 设备监控样式 */
        .device-summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding: 10px;
            background: rgba(0,0,0,0.2);
            border-radius: 4px;
            border: 1px solid var(--panel-border-color);
        }
        .device-count {
            text-align: center;
        }
        .device-count .number {
            font-size: 24px;
            font-weight: bold;
            color: var(--primary-color);
            text-shadow: var(--text-glow);
        }
        .device-count .label {
            font-size: 12px;
            color: #ccc;
        }
        .device-list {
            max-height: 300px;
            overflow-y: auto;
        }
        .device-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            margin-bottom: 8px;
            background: rgba(0,0,0,0.2);
            border: 1px solid var(--panel-border-color);
            border-radius: 4px;
            transition: all 0.3s ease;
        }
        .device-item:hover {
            border-color: var(--primary-color);
            background: rgba(0, 174, 255, 0.1);
        }
        .device-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .device-status {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .status-online { background: #00ff87; }
        .status-offline { background: #f5222d; }
        .status-warning { background: #ffc107; }
        .device-controls {
            display: flex;
            gap: 5px;
        }
        .control-switch {
            background: transparent;
            border: 1px solid var(--panel-border-color);
            color: #fff;
            padding: 4px 8px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s ease;
        }
        .control-switch:hover {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }
        .control-switch.active {
            background: #00ff87;
            border-color: #00ff87;
            color: #000;
        }
        
        /* 能耗统计样式 */
        .greenhouse-selector {
            margin-bottom: 15px;
        }
        .select-wrapper {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        .greenhouse-select {
            width: 100%;
            padding: 8px 12px;
            background: rgba(0,0,0,0.3);
            border: 1px solid var(--panel-border-color);
            border-radius: 4px;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
        }
        .greenhouse-select:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        .energy-summary {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 15px;
        }
        .energy-card {
            background: rgba(0,0,0,0.2);
            border: 1px solid var(--panel-border-color);
            border-radius: 4px;
            padding: 12px;
            text-align: center;
        }
        .energy-value {
            font-size: 20px;
            font-weight: bold;
            color: var(--primary-color);
            text-shadow: var(--text-glow);
            margin-bottom: 4px;
        }
        .energy-label {
            font-size: 12px;
            color: #ccc;
        }
        .water-chart {
            height: 150px;
            background: rgba(0,0,0,0.2);
            border: 1px solid var(--panel-border-color);
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 15px;
            position: relative;
        }
        .chart-bar {
            position: absolute;
            bottom: 20px;
            width: 30px;
            background: linear-gradient(to top, var(--primary-color), #00ff87);
            border-radius: 2px 2px 0 0;
            transition: all 0.3s ease;
        }
        .chart-label {
            position: absolute;
            bottom: 5px;
            font-size: 10px;
            color: #ccc;
            text-align: center;
        }
        .chart-title {
            position: absolute;
            top: 5px;
            left: 10px;
            font-size: 12px;
            color: var(--primary-color);
        }
        /* 左侧面板新样式 */
        .weather-card { background: rgba(0,0,0,0.2); border: 1px solid var(--panel-border-color); border-radius: 4px; padding: 10px; display: flex; align-items: center; gap: 15px; }
        .weather-now { text-align: center; border-right: 1px solid var(--panel-border-color); padding-right: 15px; }
        .weather-now .temp { font-size: 28px; color: var(--primary-color); font-weight: bold; }
        .weather-now .condition { font-size: 14px; color: #00ff87; }
        .weather-forecast { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: #ccc; }
        .weather-forecast .day { display: grid; grid-template-columns: 50px 60px 30px; }
        .env-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .stat-item { background: rgba(0,0,0,0.2); border: 1px solid var(--panel-border-color); border-radius: 4px; padding: 8px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
        .stat-item .value { font-weight: bold; color: var(--primary-color); font-size: 14px; }
        .stat-item i { margin-right: 5px; color: #ccc; }
        .device-stats { display: flex; gap: 15px; align-items: center; }
        .device-progress { flex-shrink: 0; }
        .device-table { flex-grow: 1; font-size: 12px; }
        .table-header { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr 1fr; color: #ccc; padding-bottom: 5px; border-bottom: 1px solid var(--panel-border-color); margin-bottom: 5px; text-align: center; }
        .table-header span:first-child { text-align: left; }
        .table-body { display: flex; flex-direction: column; gap: 4px; }
        .table-row { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr 1fr; align-items: center; text-align: center; background: rgba(0,0,0,0.1); padding: 4px 0; border-radius: 2px; }
        .table-row span:first-child { text-align: left; padding-left: 5px; }
        .alarm-list { display: flex; flex-direction: column; gap: 8px; }
        .alarm-item { background: rgba(255, 193, 7, 0.1); border-left: 3px solid #ffc107; padding: 8px; display: flex; justify-content: space-between; align-items: center; }
        .alarm-info .alarm-title { font-weight: bold; font-size: 13px; color: #fff; }
        .alarm-info .alarm-detail { font-size: 11px; color: #ccc; }
        .alarm-status { font-size: 12px; font-weight: bold; padding: 2px 6px; border-radius: 3px; }
        .alarm-status.status-error { color: #f5222d; }
        .alarm-status.status-normal { color: #00ff87; }
        .alarm-action { background: #f5222d; color: #fff; border: none; padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 12px; }
        .alarm-action.processed { background: #00ff87; color: #000; }
        /* 右侧面板新样式 */
        .view-all { float: right; color: #ccc; font-size: 13px; text-decoration: none; }
        .date-label { float: right; color: #ccc; font-size: 13px; }
        .energy-tabs { display: flex; gap: 10px; border-bottom: 1px solid var(--panel-border-color); margin-bottom: 10px; }
        .tab-item { padding: 8px 15px; font-size: 14px; color: #ccc; cursor: pointer; position: relative; }
        .tab-item.active { color: var(--primary-color); border-bottom: 2px solid var(--primary-color); }
        .energy-kpi-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 15px; }
        .kpi-card { background: rgba(0,0,0,0.2); border: 1px solid var(--panel-border-color); border-radius: 4px; padding: 10px; text-align: center; }
        .kpi-card .value { font-size: 20px; font-weight: bold; color: #fff; }
        .kpi-card .label { font-size: 11px; color: #ccc; margin: 2px 0; }
        .kpi-card .comparison { font-size: 12px; }
        .comparison.down { color: #00ff87; }
        .comparison.up { color: #f5222d; }
        .energy-chart { position: relative; }
        .chart-legend { position: absolute; top: -20px; right: 0; font-size: 12px; color: #ccc; }
        .chart-legend span { display: inline-block; width: 10px; height: 10px; margin-right: 5px; margin-left: 10px; }
        .chart-legend span:first-child { background: #8884d8; }
        .chart-legend span:last-child { background: #82ca9d; }

        /* 左上角信息卡片 */
        .info-cards {
            display: flex;
            gap: 15px;
            margin-bottom: 20px; /* 增加与下方内容的间距 */
        }
        .info-card {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 15px;
            background: rgba(0,0,0,0.2);
            border: 1px solid var(--panel-border-color);
            border-radius: 4px;
            padding: 12px;
        }
        .info-icon {
            font-size: 28px;
            color: var(--primary-color);
        }
        .info-text .info-label {
            font-size: 14px;
            color: #ccc;
            margin-bottom: 4px;
        }
        .info-text .info-value {
            font-size: 18px;
            font-weight: bold;
            color: #fff;
            font-family: 'Orbitron', sans-serif;
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <div class="header-left">
                <div class="farm-name">农场名称</div>
            </div>
            <div class="header-center">
                <h1>智慧农场可视化中心</h1>
            </div>
            <div class="header-right">
                <div class="datetime"></div>
            </div>
        </header>

        <div class="panel">
            <div class="info-cards">
                <div class="info-card">
                    <div class="info-icon"><i class="fas fa-chart-area"></i></div>
                    <div class="info-text">
                        <div class="info-label">农场面积</div>
                        <div class="info-value">100 亩</div>
                    </div>
                </div>
                <div class="info-card">
                    <div class="info-icon"><i class="fas fa-server"></i></div>
                    <div class="info-text">
                        <div class="info-label">设备数量</div>
                        <div class="info-value">100 台</div>
                    </div>
                </div>
            </div>
            <div class="panel-content">
                <!-- 天气信息 -->
                <div class="panel-title"><i class="fas fa-cloud-sun"></i> 天气信息</div>
                <div class="weather-card">
                    <div class="weather-now">
                        <div class="temp">20°C</div>
                        <div class="condition">良</div>
                    </div>
                    <div class="weather-forecast">
                        <div class="day"><span>今天</span><span>20/30°</span><span>良</span></div>
                        <div class="day"><span>明天</span><span>20/30°</span><span>良</span></div>
                        <div class="day"><span>后天</span><span>20/30°</span><span>良</span></div>
                    </div>
                </div>

                <!-- 环境参数 -->
                <div class="env-stats">
                    <div class="stat-item"><span><i class="fas fa-thermometer-half"></i> 空气温度</span><span class="value">30°C</span></div>
                    <div class="stat-item"><span><i class="fas fa-tint"></i> 空气湿度</span><span class="value">30%</span></div>
                    <div class="stat-item"><span><i class="fas fa-sun"></i> 光照强度</span><span class="value">30 Lux</span></div>
                    <div class="stat-item"><span><i class="fab fa-envira"></i> CO2浓度</span><span class="value">30 ppm</span></div>
                    <div class="stat-item"><span><i class="fas fa-wind"></i> 风速</span><span class="value">30 m/s</span></div>
                    <div class="stat-item"><span><i class="fas fa-compass"></i> 气压</span><span class="value">东风</span></div>
                </div>

                <!-- 设备监控 -->
                <div class="panel-title"><i class="fas fa-microchip"></i> 设备监控</div>
                <div class="device-stats">
                    <div class="device-progress">
                        <svg width="100" height="100" viewBox="0 0 120 120">
                            <circle cx="60" cy="60" r="54" fill="none" stroke="rgba(0, 174, 255, 0.2)" stroke-width="12"/>
                            <circle cx="60" cy="60" r="54" fill="none" stroke="url(#grad)" stroke-width="12" stroke-linecap="round" stroke-dasharray="251.2" stroke-dashoffset="50.24" transform="rotate(-90 60 60)"/>
                            <defs>
                                <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
                                    <stop offset="0%" style="stop-color:#00ff87;stop-opacity:1" />
                                    <stop offset="100%" style="stop-color:#00aeff;stop-opacity:1" />
                                </linearGradient>
                            </defs>
                            <text x="60" y="60" text-anchor="middle" dy="7" font-size="28" fill="#fff" font-weight="bold">100</text>
                            <text x="60" y="80" text-anchor="middle" font-size="14" fill="#ccc">总计</text>
                        </svg>
                    </div>
                    <div class="device-table">
                        <div class="table-header">
                            <span>名称</span><span>总数</span><span>在线</span><span>异常</span><span>开启</span>
                        </div>
                        <div class="table-body">
                            <div class="table-row"><span>环境监测传感器</span><span>30</span><span>28</span><span>2</span><span>1</span></div>
                            <div class="table-row"><span>PAR光辐射传感器</span><span>30</span><span>30</span><span>0</span><span>0</span></div>
                            <div class="table-row"><span>遮阳帘</span><span>30</span><span>30</span><span>0</span><span>0</span></div>
                            <div class="table-row"><span>循环风扇</span><span>30</span><span>30</span><span>0</span><span>0</span></div>
                        </div>
                    </div>
                </div>

                 <!-- 监测预警 -->
                <div class="panel-title"><i class="fas fa-exclamation-triangle"></i> 监测预警</div>
                <div class="alarm-list">
                    <div class="alarm-item">
                        <div class="alarm-info">
                            <div class="alarm-title">温湿度传感器(温室1)</div>
                            <div class="alarm-detail">请注意，环境监测，1在2025.12:12发生了阈值超限告警</div>
                        </div>
                        <div class="alarm-status status-error">温度过高</div>
                        <button class="alarm-action">未处理</button>
                    </div>
                    <div class="alarm-item">
                         <div class="alarm-info">
                            <div class="alarm-title">温湿度传感器(温室1)</div>
                            <div class="alarm-detail">请注意，环境监测，1在2025.12:12发生了阈值超限告警</div>
                        </div>
                        <div class="alarm-status status-normal">温度过高</div>
                        <button class="alarm-action processed">已处理</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-content">
            <!-- Model-Viewer 3D展示 -->
            <model-viewer 
                id="greenhouse-model"
                src="simple_greenhouse.glb" 
                alt="智慧大棚3D模型" 
                camera-controls 
                auto-rotate
                shadow-intensity="1"
                environment-image="neutral"
                exposure="1"
                shadow-softness="0.5"
                loading="eager"
                reveal="auto"
                camera-orbit="0deg 75deg 75%"
                min-camera-orbit="auto auto 25%"
                max-camera-orbit="auto auto 150%"
                field-of-view="30deg"
                min-field-of-view="10deg"
                max-field-of-view="60deg"
                style="width: 100%; height: 100%;">
                
                <!-- 进度条 -->
                <div slot="progress-bar" style="color: #00aeff; font-size: 16px; text-align: center; padding: 20px;">
                    正在加载3D模型，请稍候...
                </div>
                
                <!-- 错误提示 -->
                <div slot="error" style="color: #f5222d; font-size: 16px; text-align: center; padding: 20px;">
                    模型加载失败，请检查文件路径
                </div>
            </model-viewer>
            
            <div class="control-panel">
                <button id="btn-exterior" class="control-btn active" title="温室外景"><i class="fas fa-mountain"></i> 温室外景</button>
                <button id="btn-interior" class="control-btn" title="温室内景"><i class="fas fa-home"></i> 温室内景</button>
            </div>
            <div class="scene-alarm">
                <i class="fas fa-exclamation-triangle"></i>
                <span>1号温室温度超标告警，请及时处理</span>
            </div>
        </div>
        <div class="panel">
            <div class="panel-content">
                 <div class="panel-title"><i class="fas fa-video"></i> 视频监控 <a href="#" class="view-all">查看全部</a></div>
                 <div class="camera-summary" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 8px 12px; background: rgba(0,0,0,0.2); border-radius: 4px; border: 1px solid var(--panel-border-color);">
                    <div class="camera-count" style="font-size: 12px; color: #ccc;">摄像头总数: <span id="total-cameras">4</span></div>
                    <div class="camera-count" style="font-size: 12px; color: #ccc;">在线: <span id="online-cameras" class="camera-online" style="color: #00ff87; font-weight: bold;">3</span> | 离线: <span id="offline-cameras" class="camera-offline" style="color: #ff4757; font-weight: bold;">1</span></div>
                </div>
                 <div class="camera-grid">
                    <div class="camera-item"></div>
                    <div class="camera-item"></div>
                    <div class="camera-item"></div>
                    <div class="camera-item"></div>
                </div>

                <div class="panel-title"><i class="fas fa-chart-bar"></i> 能耗分析 <span class="date-label">2025-05-28</span></div>
                <div class="energy-tabs">
                    <div class="tab-item active" id="tab-electric">农场用电统计</div>
                    <div class="tab-item" id="tab-water">农场用水统计</div>
                </div>
                <div class="energy-content">
                    <div class="energy-kpi-grid" id="kpi-electric">
                        <div class="kpi-card">
                            <div class="value">4000</div>
                            <div class="label">本日总能耗kw/h</div>
                            <div class="comparison down">较昨日 -15%</div>
                        </div>
                        <div class="kpi-card">
                            <div class="value">4000</div>
                            <div class="label">本月总能耗kw/h</div>
                             <div class="comparison down">较上月 -15%</div>
                        </div>
                        <div class="kpi-card">
                            <div class="value">4000</div>
                            <div class="label">本年总能耗kw/h</div>
                             <div class="comparison down">较去年 -15%</div>
                        </div>
                    </div>
                    <div class="energy-kpi-grid" id="kpi-water" style="display:none;">
                      <div class="kpi-card">
                        <div class="value">120</div>
                        <div class="label">本日用水量m³</div>
                        <div class="comparison up">较昨日 +5%</div>
                      </div>
                      <div class="kpi-card">
                        <div class="value">3200</div>
                        <div class="label">本月用水量m³</div>
                        <div class="comparison down">较上月 -8%</div>
                      </div>
                      <div class="kpi-card">
                        <div class="value">38000</div>
                        <div class="label">本年用水量m³</div>
                        <div class="comparison up">较去年 +2%</div>
                      </div>
                    </div>
                    <div class="energy-chart">
                        <div class="chart-legend"><span></span>去年 <span></span>今年</div>
                        <div id="energyChart" style="width: 100%; height: 120px;"></div>
                      <div id="waterChart" style="width: 100%; height: 120px; display:none;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script>
    // 初始化摄像头监控
    const cameras = document.querySelectorAll('.camera-item');
    let cameraStatuses = ['在线', '在线', '离线', '在线'];
    const cameraNames = ['入口监控', '作物区域A', '设备区域', '环境监测'];
    const cameraImages = [
        'https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?w=400&h=225&fit=crop&crop=center',
        'https://images.unsplash.com/photo-1574323347407-f5e1ad6d020b?w=400&h=225&fit=crop&crop=center',
        'https://images.unsplash.com/photo-1592924357228-91a4daadcfea?w=400&h=225&fit=crop&crop=center',
        'https://images.unsplash.com/photo-1574323347407-f5e1ad6d020b?w=400&h=225&fit=crop&crop=center'
    ];

    function initializeCameras() {
        cameras.forEach((cam, index) => {
            cam.style.backgroundImage = `url('${cameraImages[index]}')`;
            cam.innerHTML = `
                <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.7) 100%); display: flex; align-items: flex-end; justify-content: flex-start; padding: 8px; color: #fff; font-size: 12px;">
                    <div style="text-align: left;">
                        <div style="font-weight: bold; margin-bottom: 2px; text-shadow: 1px 1px 2px rgba(0,0,0,0.8);">${cameraNames[index]}</div>
                        <div style="color: ${cameraStatuses[index] === '在线' ? '#00ff87' : '#ff4757'}; font-size: 10px; text-shadow: 1px 1px 2px rgba(0,0,0,0.8);">● ${cameraStatuses[index]}</div>
                    </div>
                </div>
            `;
            cam.addEventListener('mouseenter', () => {
                cam.style.borderColor = '#00c3ff';
                cam.style.boxShadow = '0 0 10px rgba(0, 195, 255, 0.3)';
                cam.style.transform = 'scale(1.02)';
                cam.style.transition = 'all 0.3s ease';
            });
            cam.addEventListener('mouseleave', () => {
                cam.style.borderColor = 'var(--panel-border-color)';
                cam.style.boxShadow = 'none';
                cam.style.transform = 'scale(1)';
            });
        });
        updateCameraSummary();
    }

    function updateCameraSummary() {
        const onlineCount = cameraStatuses.filter(status => status === '在线').length;
        const onlineElement = document.getElementById('online-cameras');
        const offlineElement = document.getElementById('offline-cameras');
        if (onlineElement) onlineElement.textContent = onlineCount;
        if (offlineElement) offlineElement.textContent = cameraStatuses.length - onlineCount;
    }

    function updateCameraStatuses() {
        cameraStatuses = cameraStatuses.map(() => Math.random() > 0.3 ? '在线' : '离线');
        initializeCameras();
    }

    initializeCameras();
    setInterval(updateCameraStatuses, 30000);

    // 添加tab切换功能
    console.log('开始初始化tab切换功能...');
    
    try {
        const tabElectric = document.getElementById('tab-electric');
        const tabWater = document.getElementById('tab-water');
        const kpiElectric = document.getElementById('kpi-electric');
        const kpiWater = document.getElementById('kpi-water');
        const energyChart = document.getElementById('energyChart');
        const waterChart = document.getElementById('waterChart');

        console.log('tabElectric:', tabElectric);
        console.log('tabWater:', tabWater);
        console.log('kpiElectric:', kpiElectric);
        console.log('kpiWater:', kpiWater);

        // Tab切换事件
        if (tabElectric && tabWater && kpiElectric && kpiWater) {
            console.log('所有元素都找到了，添加事件监听器...');
            
            tabElectric.addEventListener('click', () => {
                console.log('点击了用电统计tab');
                tabElectric.classList.add('active');
                tabWater.classList.remove('active');
                kpiElectric.style.display = 'grid';
                kpiWater.style.display = 'none';
                if (energyChart) energyChart.style.display = 'block';
                if (waterChart) waterChart.style.display = 'none';
                
                // 重新初始化用电图表
                if (window.electricChartInstance) {
                    window.electricChartInstance.resize();
                }
            });

            tabWater.addEventListener('click', () => {
                console.log('点击了用水统计tab - 事件被触发');
                tabWater.classList.add('active');
                tabElectric.classList.remove('active');
                kpiWater.style.display = 'grid';
                kpiElectric.style.display = 'none';
                if (waterChart) waterChart.style.display = 'block';
                if (energyChart) energyChart.style.display = 'none';
                console.log('样式已更新，准备初始化用水图表');
                // 延迟初始化，确保容器已渲染
                setTimeout(() => {
                    console.log('开始延迟初始化用水图表');
                    initWaterChart();
                }, 100);
            });
            
            console.log('事件监听器添加完成');
        } else {
            console.error('某些元素未找到，tab切换功能无法初始化');
        }
    } catch (error) {
        console.error('初始化tab切换功能时出错:', error);
    }

    // 初始化用水统计图表
    function initWaterChart() {
        console.log('初始化用水图表...');
        
        if (window.waterChartInstance) {
            console.log('用水图表已存在，重新调整大小');
            window.waterChartInstance.resize();
            return;
        }

        const waterChartDom = document.getElementById('waterChart');
        console.log('用水图表DOM元素:', waterChartDom);
        
        if (waterChartDom) {
            console.log('开始创建用水图表...');
            const waterChart = echarts.init(waterChartDom, 'dark');
            const waterChartOption = {
                backgroundColor: 'transparent',
                tooltip: { 
                    trigger: 'axis', 
                    backgroundColor: 'rgba(0,0,0,0.7)', 
                    borderColor: 'var(--panel-border-color)', 
                    textStyle: { color: '#fff' } 
                },
                grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: { lineStyle: { color: 'rgba(255,255,255,0.2)' } },
                    axisLabel: { fontSize: 10 }
                },
                yAxis: {
                    type: 'value',
                    splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
                    axisLine: { lineStyle: { color: 'rgba(255,255,255,0.2)' } },
                    axisLabel: { fontSize: 10 }
                },
                legend: { show: false },
                series: [
                    {
                        name: '去年',
                        type: 'line',
                        smooth: true,
                        data: [2800, 3200, 2900, 3500, 3100, 4200, 3800, 3600, 3300, 3900, 4100, 4300],
                        itemStyle: { color: '#8884d8' },
                        areaStyle: { 
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(136, 132, 216, 0.3)' }, 
                                { offset: 1, color: 'rgba(136, 132, 216, 0)' }
                            ])
                        }
                    },
                    {
                        name: '今年',
                        type: 'line',
                        smooth: true,
                        data: [2500, 2800, 3100, 2900, 3200, 3800, 3900, 3500, 3300, 3700, 3800, 4000],
                        itemStyle: { color: '#82ca9d' },
                        areaStyle: { 
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(130, 202, 157, 0.3)' }, 
                                { offset: 1, color: 'rgba(130, 202, 157, 0)' }
                            ])
                        }
                    }
                ]
            };
            waterChart.setOption(waterChartOption);
            window.waterChartInstance = waterChart;
            console.log('用水图表创建成功');
            
            window.addEventListener('resize', () => {
                waterChart.resize();
            });
        } else {
            console.error('找不到用水图表DOM元素');
        }
    }

    // 环境参数模拟数据更新
    function updateMockData() {
        const values = document.querySelectorAll(".env-stats .value");
        if (values.length >= 5) {
            values[0].textContent = (20 + Math.random() * 15).toFixed(1) + '°C';
            values[1].textContent = (30 + Math.random() * 50).toFixed(0) + '%';
            values[2].textContent = (10000 + Math.random() * 20000).toFixed(0) + ' Lux';
            values[3].textContent = (400 + Math.random() * 400).toFixed(0) + ' ppm';
            values[4].textContent = (1 + Math.random() * 5).toFixed(1) + ' m/s';
        }
    }
    setInterval(updateMockData, 2500);
    updateMockData();

    // 时间更新
    function updateDateTime() {
        const now = new Date();
        const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false, timeZone: 'Asia/Shanghai' };
        document.querySelector(".datetime").textContent = now.toLocaleString('zh-CN', options).replace(/\//g, '-');
    }
    setInterval(updateDateTime, 1000);
    updateDateTime();

    // 天气状态更新
    function updateWeatherState(weatherType) {
        const weatherConditionEl = document.querySelector('.weather-card .condition');
        const weatherTempEl = document.querySelector('.weather-card .temp');
        
        switch (weatherType) {
            case 'rain':
                weatherConditionEl.textContent = '雨';
                weatherTempEl.textContent = '15°C';
                break;
            case 'snow':
                weatherConditionEl.textContent = '雪';
                weatherTempEl.textContent = '-2°C';
                break;
            case 'sunny':
            default:
                weatherConditionEl.textContent = '晴';
                weatherTempEl.textContent = '22°C';
                break;
        }
    }

    function startAutomaticWeather() {
        const weatherTypes = ['sunny', 'rain', 'snow', 'sunny', 'sunny'];
        updateWeatherState('sunny');

        setInterval(() => {
            const randomWeather = weatherTypes[Math.floor(Math.random() * weatherTypes.length)];
            updateWeatherState(randomWeather);
        }, 10000);
    }
    startAutomaticWeather();

    // --- ECHARTS INITIALIZATION ---
    if (energyChart) {
        const energyChartInstance = echarts.init(energyChart, 'dark');
        window.electricChartInstance = energyChartInstance; // 保存实例引用
        const energyChartOption = {
            backgroundColor: 'transparent',
            tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,0,0,0.7)', borderColor: 'var(--panel-border-color)', textStyle: { color: '#fff' } },
            grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisLine: { lineStyle: { color: 'rgba(255,255,255,0.2)' } },
                axisLabel: { fontSize: 10 }
            },
            yAxis: {
                type: 'value',
                splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
                axisLine: { lineStyle: { color: 'rgba(255,255,255,0.2)' } },
                axisLabel: { fontSize: 10 }
            },
            legend: { show: false },
            series: [
                {
                    name: '去年',
                    type: 'line',
                    smooth: true,
                    data: [1200, 1400, 1008, 1600, 1300, 2000, 1800, 1700, 1500, 1900, 2100, 2300],
                    itemStyle: { color: '#8884d8' },
                    areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(136, 132, 216, 0.3)' }, { offset: 1, color: 'rgba(136, 132, 216, 0)' }])}
                },
                {
                    name: '今年',
                    type: 'line',
                    smooth: true,
                    data: [800, 900, 1100, 1000, 1200, 1500, 1600, 1400, 1300, 1700, 1800, 2000],
                    itemStyle: { color: '#82ca9d' },
                    areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(130, 202, 157, 0.3)' }, { offset: 1, color: 'rgba(130, 202, 157, 0)' }])}
                }
            ]
        };
        energyChartInstance.setOption(energyChartOption);
        
        window.addEventListener('resize', () => {
            energyChartInstance.resize();
        });
    }

</script>
</body>
</html>